<template>
    <div class="mainDiv" style="padding: 10px;box-sizing: border-box;">
        <el-alert class="mt" title="温馨提示：起初审核后将不能编辑起初信息，请确认起初信息填写正确！" type="error"></el-alert>
        <div class="rowHead">
            <el-tag>客户姓名：{{ginfo.name}}</el-tag>
            <el-tag class="ml">客户电话：{{ginfo.phone}}</el-tag>
            <el-input size="small" v-model="ginfo.balance" style="width: 200px">
                <template slot="prepend">账户余额</template>
            </el-input>
            <el-input size="small" v-model="ginfo.giftbalance" style="width: 200px">
                <template slot="prepend">赠送余额</template>
            </el-input>
            <el-select size="small" v-model="ginfo.level" style="width: 200px">
                <el-option v-for="v in vlist" :label="v.vipname" :value="v.id">
                </el-option>
            </el-select>
        </div>
        <div class="rowHead">
            <el-button type="primary" size="small" icon="el-icon-plus" class="mt mb" @click="addSubs">起初项目</el-button>
            <el-table :data="slist" :stripe="true">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="name" label="项目"></el-table-column>
                <el-table-column prop="number" label="编号"></el-table-column>
                <el-table-column prop="cardtype" label="所属类型" width="150">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.cardtype" active-color="#60e489" inactive-color="#606ae4" active-text="期卡" inactive-text="疗程">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="原价"></el-table-column>
                <el-table-column prop="disprice" label="折扣价">
                    <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.disprice" v-if="!scope.row.cardtype"></el-input>
                        <span v-else>0</span>
                    </template>
                </el-table-column>
                </el-table-column>
                <el-table-column prop="nownum" label="剩余数">
                    <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.nownum" v-if="!scope.row.cardtype"></el-input>
                        <span v-else>0</span>
                    </template>
                </el-table-column>
                <el-table-column prop="endtime" label="有效期" width="150">
                    <template slot-scope="scope">
                        <el-date-picker size="mini" style="width: 140px;" v-model="scope.row.endtime" type="date" placeholder="选择截止日期" v-if="scope.row.cardtype">
                        </el-date-picker>
                        <span v-else>用完为止</span>
                    </template>
                </el-table-column>
                <el-table-column label="移除">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" icon="el-icon-close" @click="delRowSubs(scope.$index)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="primary" size="small" icon="el-icon-plus" class="mt mb" @click="addGods">起初产品</el-button>
            <el-table :data="glist" :stripe="true">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="gname" label="产品"></el-table-column>
                <el-table-column prop="number" label="编号"></el-table-column>
                <el-table-column prop="price" label="单价"></el-table-column>
                <el-table-column prop="disprice" label="折扣价">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isgift">0</span>
                        <el-input size="mini" v-model="scope.row.disprice" v-else></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="nownum" label="剩余数">
                    <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.nownum"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="isgift" label="是否赠送">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.isgift" active-color="#409eff" inactive-color="#999" active-text="赠" inactive-text="否">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="移除">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" icon="el-icon-close" @click="delRowGods(scope.$index)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block right mt mb">
            <el-button size="mini" type="success" icon="el-icon-upload" @click="setQichu">确定修改</el-button>
            <el-button size="mini" type="danger" icon="el-icon-close" @click="close">取消关闭</el-button>
        </div>
    </div>
</template>
<script>
import C from '#/src/common/common.js'

export default {
    name: 'editGuestInitial',
    data() {
        return {
            ginfo: {}, // 客户的基本信息
            slist: [], // 客户需要添加的卡项列表
            glist: [], // 客户之前暂存的品项列表
            delsid: [], // 需要删除的客户卡项ID
            delgid: [], // 需要删除的客户暂存品项ID
            vlist: [],
            gid: 0
        }
    },
    methods: {

        addSubs: async function() {
            let res = await C.openBrowserWindow('/selectSubject', {}, { width: 1200, height: 860, useSpa: true, spaModel: 'shop', transparent: true, frame: false })
            if (res) {
                res.forEach((v) => {
                    this.slist.push({
                        subjectid: v.id,
                        name: v.name,
                        price: v.price,
                        disprice: v.price,
                        number: v.number,
                        cardtype: false,
                        isgift: false,
                        nownum: '',
                        endtime: '',
                    })
                })
            }
        },
        close() {
            C.closewin()
        },
        delRowSubs: function(i) {
            if (this.slist[i].id) this.delsid.push(this.slist[i].id)
            this.slist.splice(i, 1)
        },

        addGods: async function() {
            let res = await C.openBrowserWindow('/selectGoods', {}, { width: 1200, height: 860, useSpa: true, spaModel: 'shop', transparent: true, frame: false })
            if (res) {
                res.forEach((v) => {
                    this.glist.push({
                        goodsid: v.id,
                        gname: v.name,
                        number: v.number,
                        price: v.price,
                        disprice: v.price,
                        nownum: '',
                        isgift: false,
                        brandid: v.brandid
                    })
                })
            }
        },

        delRowGods: function(i) {
            if (this.glist[i].id) this.delgid.push(this.glist[i].id)
            this.glist.splice(i, 1)
        },

        setQichu: async function() {
            let currentTime = Math.round(new Date().valueOf() / 1000)

            let err1 = {
                type: false,
                msg: '请选择项目有效期，并且大于今天'
            }
            let err2 = {
                type: false,
                msg: '请添加项目的总数和剩余数量，且剩余数量低于总数'
            }
            let err3 = {
                type: false,
                msg: '请添加产品的总数和剩余量，且剩余数量低于总数'
            }

            this.slist.forEach((v) => {
                if (v.cardtype) {
                    if (v.endtime === '' || Math.round(new Date(v.endtime).valueOf() / 1000) < currentTime) {
                        err1.type = true
                    }
                } else {
                    if (v.nownum * 1 <= 0) {
                        err2.type = true
                    }
                }
            })

            this.glist.forEach((v) => {
                if (v.nownum * 1 <= 0) {
                    err3.type = true
                }
            })

            if (err1.type) {
                C.error(err1.msg)
                return false
            } else if (err2.type) {
                C.error(err2.msg)
                return false
            } else if (err3.type) {
                C.error(err3.msg)
                return false
            }

            let data = {
                ginfo: {
                    id: this.ginfo.id,
                    balance: this.ginfo.balance,
                    giftbalance: this.ginfo.giftbalance,
                    level: this.ginfo.level
                },
                slist: this.slist,
                delsid: this.delsid,
                glist: this.glist,
                delgid: this.delgid
            }

            let res = await C.ajax('/shop/guest/setguestinitial', { data: JSON.stringify(data) }, 'post')
            if (res) {
                C.closeBrowserWindow(res)
            }
        },

    },
    mounted: async function() {
        let Request = C.getDatas()
        this.gid = Request.gid
        let res = await C.ajax('/shop/guest/queryinitail', { gid: Request.gid })
        if (res) {
            this.ginfo = res.ginfo
            this.vlist = res.vlist
            res.slist.forEach((v) => {
                if (v.cardtype === 1) {
                    v.cardtype = true
                    v.endtime = new Date(v.endtime * 1000)
                } else {
                    v.cardtype = false
                    v.endtime = new Date()
                }
            })
            this.slist = res.slist

            res.glist.forEach((v) => {
                v.isgift = v.isgift ? true : false
            })
            this.glist = res.glist

        }
    }
}
</script>